<?php
/**
 * Created by dutuwang.net
 * User: adophper <hello@adophper.com>
 * Date: 2018/3/30
 * Time: 17:24
 */

use yii\helpers\Html;
$this->title = $model->title;
?>
<?=Html::cssFile('/static/frontend/css/exclusive.css')?>
<?=Html::jsFile('/static/frontend/js/swipe.js')?>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZubVDLGbR5Rduah7YW2acfLuGQIgxKse"></script>
<style>
html,body {background-color: #efefef;}
</style>
<div class="hall-detail">
    <!--全景展示区域-->
    <div class="panorama_are text-center img">
        <img src="<?=$model->banner?>" />
    </div>
    <div class="gradient" style="background-color: #f5f5f5;">
        <div class="contBox">
            <p class="exclusive_title t_center">
                <span>展馆介绍</span>
            </p>
            <div class="exclusive_banner_vedio_box">
                <div class="flex f_between exclusive_banner_vedio_min">
                    <div class="exclusive_banner_vedio_min_txt" style="<?=empty($data['video'])?'width:100%;':''?>">
                        <h2 class="t_red t_o"><?=$model->title?></h2>
                        <div class="hall-introduce"><?=$model->introduce?></div>
                    </div>
                    <?php
                    if (!empty($data['video'])) {
                    ?>
                    <div class="exclusive_banner_vedio_min_vedio">
                        <video class="video_box" src="<?=$data['video'][0]['fileUrl']?>" controls="controls" controls="controls">
                            您的浏览器不支持视频播放
                        </video>
                    </div>
                    <?php
                    }
                    ?>
                </div>
            </div>
        </div>
    </div>
    <div class="gradient" style="background-color: #fff;">
        <div class="contBox">
            <p class="exclusive_title t_center">
                <span><?=date('Y')?> 展会排期</span>
            </p>
            <div class="hall-exhibition">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <?php
                        $month = date('m');
                        for ($j = 1; $j <= 12; $j++) {
                        ?>
                        <li class="<?=$j == $month ? 'active' : ''?>"><a href="#month_<?=sprintf("%02d", $j)?>" data-toggle="tab" aria-expanded="true"><?=sprintf("%02d", $j)?>月</a></li>
                        <?php
                        }
                        ?>
                    </ul>
                    <div class="tab-content">
                        <?php
                        for ($j = 1; $j <= 12; $j++) {
                        ?>
                        <div class="tab-pane <?=$j == $month ? 'active' : ''?>" id="month_<?=sprintf("%02d", $j)?>">
                            <?php
                            $k = sprintf("%02d", $j);
                            if (!empty($data['list'][$k])) {
                                foreach ($data['list'][$k] as $item) {
                            ?>
                            <div class="pane-item clearfix">
                                <a class="pull-left" href="<?=Yii::$app->urlManager->createUrl(['zhanhui/detail', 'id' => $item['id']])?>"><?=$item['title']?></a>
                                <span class="pull-right"><?=date('Y-m-d', $item['starttime'])?><?=Yii::t('frontend', 'to')?><?=date('Y-m-d', $item['endtime'])?></span>
                            </div>
                            <?php
                                }
                            }
                            ?>
                        </div>
                        <?php
                        }
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--展馆图片-->
    <div class="gradient" style="background-color: #f9f9f9;">
        <div class="contBox">
            <p class="exclusive_title t_center">
                <span>展馆图片</span>
            </p>
            <div class="hall-picture">
                <div class="hall-picture-box">
                    <div class="swipe" id="slider">
                        <div class="swipe-wrap">
                            <div class="clearfix">
                                <?php
                                if (!empty($data['picture'])) {
                                    $i = 1;
                                    $count = count($data['picture']);
                                    foreach ($data['picture'] as $val) {
                                ?>
                                <div class="col-xs-4 col-md-4 img flex text-center"><img src="<?=$val['fileUrl']?>_380x300.jpg" alt="<?=$val['filename']?>" /></div>
                                <?php
                                        if ($i % 3 == 0 && $i < $count) {
                                ?>
                                </div><div class="clearfix">
                                <?php
                                        }
                                        $i ++;
                                    }
                                }
                                ?>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hall-picture-page" id="hall_picture_page">
                    <?php
                    if (!empty($data['picture'])) {
                        $for = ceil($count/3);
                        for ($j = 0; $j < $for; $j ++) {
                    ?>
                        <span class="<?=$j==0?'on':''?>"></span>
                    <?php
                        }
                    }
                    ?>
                </div>
                <script>
                    var same = Swipe(document.getElementById('slider'), {
                        auto: 3000,
                        continuous: true,
                        callback: function(pos) {
                            var i = bullets.length;
                            while (i--) {
                                bullets[i].className = '';
                            }
                            bullets[pos].className = 'on';
                        }
                    });
                    var bullets = document.getElementById('hall_picture_page').getElementsByTagName('span');
                </script>
            </div>
        </div>
    </div>
    <!--展馆地理位置-->
    <div class="gradient" style="background-color: #efefef;">
        <div class="contBox">
            <p class="exclusive_title t_center"><span>展馆地理位置</span></p>
            <div class="map">
                <div id="allMap"></div>
                <script>
                    var point = {
                        lng: '<?=$model->lng?>',
                        lat: '<?=$model->lat?>'
                    }
                    var map = new BMap.Map("allMap");    // 创建Map实例
                    map.centerAndZoom(new BMap.Point(point.lng, point.lat), 15);  // 初始化地图,设置中心点坐标和地图级别
                    map.setCurrentCity("<?=\common\models\Region::getRegionName($model->region_id)?>");          // 设置地图显示的城市 此项是必须设置的
                    map.enableScrollWheelZoom(false);     //开启鼠标滚轮缩放
                    var marker = new BMap.Marker(new BMap.Point(point.lng, point.lat));  // 创建标注，为要查询的地方对应的经纬度
                    map.panBy(new BMap.Point(point.lng, point.lat));
                    map.removeOverlay(marker.getLabel());
                    map.addOverlay(marker);
                </script>
            </div>
        </div>
    </div>
</div>
